-
Notifications
You must be signed in to change notification settings - Fork 14
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: ability to add titles for the links #549
Conversation
Preview is ready. |
89b065c
to
b9cc8fe
Compare
b9cc8fe
to
e9056c2
Compare
<a href={url} title={text} className={classes} {...rest} {...linkExtraProps}> | ||
<a | ||
href={url} | ||
title={urlTitle || text} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why is there a fallback to the text in this place but not in all places?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For backward compatibility I left fallback here. But I didn't do one on other places to avoid unexpected tooltips. Moreover, I expect that the link text and link title will not be the same
const iconData = getMediaImage(icon); | ||
const {alt} = iconData; | ||
|
||
return ( | ||
<a | ||
href={url} | ||
aria-label={alt} | ||
title={alt} | ||
title={urlTitle || alt} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can alt
of icon be the title of a link?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, but the accessible name will be read by screenreader in this order:
- link text
- image alt
- link title
Is icon's alt
is the same as the link title, the screenreader will read two sentences twice, it is not really good. So I think they should differ
urlTitle
everywhere where links (<a>
tags) were used.This feature can be used to provide both visual and accessible warning that the link will open in a new tab
Closes #484 and #485